import {
 Button, Form, Input, message, Modal, Spin, Tabs,
} from 'antd'
import React, { PureComponent } from 'react'
import { TreeCheckTable } from '@/components'
import { addRole, editRole } from './api'
import { regExp } from '@/utils/regExp'
import Tools from '@/utils/Tools'
import styles from './index.less'

const { Item } = Form
const { TextArea } = Input
const Bus = Tools.Bus
const { TabPane } = Tabs

export default class RoleModal extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      visible: false,
      isEdit: false,
      isCheck: false,
      id: '',
    }

    this.form = React.createRef()
  }

  // 新建角色
  // eslint-disable-next-line react/no-unused-class-component-methods
  onNewOpen(data) {
    this.setState({
      isEdit: false,
      isCheck: false,
      visible: true,
    }, () => {
      this.form.current.setFieldsValue({
        jurisdiction: data,
        roleName: undefined,
        des: undefined,
      })
    })
  }

  // 编辑角色
  // eslint-disable-next-line react/no-unused-class-component-methods
  onEditOpen(data, arr) {
    this.setState({
      isEdit: true,
      isCheck: false,
      visible: true,
      id: data.id,
    }, () => {
      this.form.current.setFieldsValue({
        jurisdiction: arr,
        roleName: data.roleName,
        des: data.des,
      })
    })
  }

  // 查看角色
  // eslint-disable-next-line react/no-unused-class-component-methods
  onCheckOpen(data, arr) {
    this.setState({
      isEdit: false,
      isCheck: true,
      visible: true,
      id: data.id,
    }, () => {
      this.form.current.setFieldsValue({
        jurisdiction: arr,
        roleName: data.roleName,
        des: data.des,
      })
    })
  }

  closeModal = () => {
    this.setState({ visible: false })
  }

  onConfirm = () => {
    const handleMenuList = (arr) => {
      const menuList = []
      const checkItem = (item) => {
        if (item.children) {
          item.children.map((childItem) => {
            checkItem(childItem)
          })
        } else if (item.check || item.edit) {
          menuList.push({
            menuId: item.key,
            readWriteStatus: item.edit ? 1 : 0,
          })
        }
      }
      arr.map((item) => {
        checkItem(item)
      })
      return menuList
    }

    this.form.current.validateFields().then(values => {
      const post = {
        roleDesc: values.des,
        roleName: values.roleName,
        menuList: handleMenuList(values.jurisdiction),
      }
      let promiseFun
      let megStr
      if (this.state.isEdit) {
        post.id = this.state.id
        promiseFun = editRole
        megStr = '编辑角色成功'
      } else {
        promiseFun = addRole
        megStr = '新增角色成功'
      }
      this.setState({ loading: true })
      promiseFun(post).then(
        (res) => {
          this.setState({
            visible: false,
            loading: false,
          }, () => {
            message.success(megStr)
            this.props.closeCallBack && this.props.closeCallBack()
            // 刷新全局dva内保存的关于权限的信息
            Bus.emit('UpdateAuth')
          })
        },
        (error) => {
          this.setState({ loading: false })
        },
      )
    })
  }

  getTitleStr = () => {
    const { isEdit, isCheck } = this.state
    if (isEdit) {
      return '编辑角色'
    } if (isCheck) {
      return '查看角色'
    }
    return '新增角色'
  }

  render() {
    const {
      visible, isCheck, loading,
    } = this.state
    const nameReg = regExp.name()
    const dscReg = regExp.proName(0, 128)

    return (
      <Modal
        title={this.getTitleStr()}
        visible={visible}
        width={1020}
        onCancel={this.closeModal}
        maskClosable={false}
        onOk={this.onConfirm}
        footer={
          isCheck ? null : (
            <>
              <Button
                onClick={this.closeModal}
              >
                取消
              </Button>
              <Button
                onClick={this.onConfirm}
                type="primary"
                loading={loading}
              >
                确定
              </Button>
            </>
          )
        }
        bodyStyle={{
          // height: `${document.documentElement.clientHeight * 0.65}px`,
          overflowY: 'auto',
        }}
      >
        <Spin spinning={this.state.loading}>
          <Form
            ref={this.form}
            labelCol={{ span: 2 }}
            wrapperCol={{ span: 22 }}
            className={styles.form}
          >
            <Form.Item>
              <div className={styles.column}>基础信息</div>
            </Form.Item>
            <Item
              label="角色名称"
              name="roleName"
              rules={[
                { required: true, message: '请输入角色名称' },
                {
                  pattern: new RegExp(nameReg.reg, 'g'),
                  message: nameReg.text,
                },
              ]}
            >
              <Input
                placeholder="请输入角色名称"
                disabled={isCheck}
                autoComplete="off"
              />
            </Item>
            <Item
              label="角色描述"
              name="des"
              rules={[
                {
                  pattern: new RegExp(dscReg.reg, 'g'),
                  message: dscReg.text,
                },
              ]}
            >
              <TextArea
                placeholder="请输入角色描述"
                rows={3}
                disabled={isCheck}
              />
            </Item>
            <Form.Item>
              <div className={styles.column}>权限配置</div>
            </Form.Item>
            <div
              style={{ height: '4rem' }}
            >
              <Tabs
                type="card"
              >
                <TabPane tab="模块权限" key={1}>
                  <Item
                    noStyle
                    name="jurisdiction"
                  >
                    <TreeCheckTable
                      scroll={{ y: 400 }}
                      titleName="功能列表"
                        // checkFieldName="check"
                        // editFieldName="eidt"
                      disabled={isCheck}
                    />
                  </Item>
                </TabPane>
                <TabPane tab="数据权限" key={2}>
                  <Item
                    noStyle
                    name="jurisdiction"
                  >
                    <TreeCheckTable
                      scroll={{ y: 400 }}
                      titleName="数据列表"
                        // checkFieldName="check"
                        // editFieldName="eidt"
                      disabled={isCheck}
                    />
                  </Item>
                </TabPane>
              </Tabs>
            </div>
          </Form>
        </Spin>
      </Modal>
    )
  }
}
